<template>
  <div style="padding: 20px">
    <section id="statistics">
      <div class="top">
        <div class="left">
          <Icon type="ios-bookmark" style="vertical-align:middle"/>
          <i>睡眠统计</i>
        </div>
        <div class="time">
          <DatePicker format="yyyy/MM/dd HH:mm:ss" type="daterange" show-week-numbers
                      :value="[bloc.form.createBegin,bloc.form.createEnd]"
                      @on-change="dateChange" split-panels
                      :options="options"
                      style="width: 300px;margin-right:5px"></DatePicker>
        </div>
      </div>
      <ul class="statistics">
        <li>
          <div class="top">
            <div class="time">
              <h3>睡眠次数</h3>
              <p>{{rouseCount.asleepNum + rouseCount.insomniaNum}}</p>
            </div>
            <ChartBar :value="time" style="height:120px;margin:0px;width:80px;border:none"></ChartBar>
            <Poptip trigger="hover" content="所选日期范围内，睡眠记录统计">
              <Icon type="ios-information" size="30"></Icon>
            </Poptip>
          </div>
          <div class="bottom">
            <span>入睡<i>{{rouseCount.asleepNum}}</i></span>
            <span>失眠<i>{{rouseCount.insomniaNum}}</i></span>
          </div>
        </li>
        <li>
          <div class="top">
            <div class="time">
              <h3>开启促眠</h3>
              <p>{{rouseCount.rouseNum + rouseCount.commonNum}}</p>
            </div>
            <ChartPie :value="promote" style="height:120px;margin:0px;width:80px;border:none"></ChartPie>
            <Poptip trigger="hover" content="所选日期范围内，开启促眠的睡眠记录统计">
              <Icon type="ios-information" size="30"></Icon>
            </Poptip>
          </div>
          <div class="bottom">
            <span>促眠<i>{{rouseCount.rouseNum}}</i></span>
            <span>普通<i>{{rouseCount.commonNum}}</i></span>
          </div>
        </li>
        <li>
          <div class="top">
            <div class="time">
              <h3>入睡时长</h3>
              <p>{{rouseCount.asleepTime}}m</p>
            </div>
            <AreaLine :xSleep="xSleep" :ySleep="ySleep"
                      style="height:120px;margin:0px;width:200px;border:none"></AreaLine>
            <Poptip trigger="hover" content="所选日期范围内，平均入睡时长的统计分析">
              <Icon type="ios-information" size="30"></Icon>
            </Poptip>
          </div>
          <div class="bottom">
            <span>促眠入睡<i>{{rouseCount.rouseAsleepTime}}h</i></span>
            <span>普通入睡<i>{{rouseCount.commonAsleepTime}}h</i></span>
          </div>
        </li>
        <li>
          <div class="top">
            <div class="time">
              <h3>促眠成功</h3>
              <p>{{rouseCount.rouseNum}}</p>
            </div>
            <Progress :percent="rouseCount.rouseSucceedNum*100 / rouseCount.rouseNum"
                      style="margin-top: 80px"></Progress>
            <Poptip trigger="hover" content="所选日期范围内，开启促眠模式，入睡时间小于等于30分钟的成功率分析">
              <Icon type="ios-information" size="30"></Icon>
            </Poptip>
          </div>
          <div class="bottom">
            <span>成功<i>{{rouseCount.rouseSucceedNum}}次</i></span>
            <span>失败<i>{{rouseCount.rouseFailNum}}次</i></span>
          </div>
        </li>
      </ul>
    </section>
    <section id="report">
      <div class="top">
        <div class="left">
          <Icon type="ios-bookmark" style="vertical-align:middle"/>
          <i>睡眠报告</i>
        </div>
        <div class="time">
          <Date-picker type="date" placeholder="选择日期" format="yyyy/MM/dd HH:mm:ss" show-week-numbers
                       :value="bloc.time.createBegin"
                       @on-change="reportChange" split-panels
                       :options="options" style="width: 200px"></Date-picker>
        </div>
      </div>
      <div class="report">
        <div style="cursor: pointer">
          <Icon type="ios-arrow-back" size="30" style="margin-top:90px" @click="handleScroll(240)"></Icon>
        </div>
        <div class="scroll-outer" ref="scrollOuter">
          <ul ref="scrollBody" class="scroll-body" :style="{left: tagBodyLeft + 'px'}"
              v-for="(item,index) in asleepAnalyze" :key="index">
            <li>
              <h3>睡眠记录{{index+1}}</h3>
              <p>设备编号：{{item.deviceSn}}</p>
              <p>睡眠时间：</p>
              <p>{{formatDate(new Date(item.bedTime),'yyyy-MM-dd hh:mm:ss')}}~
                {{formatDate(new Date(item.offlineTime),'yyyy-MM-dd hh:mm:ss')}}</p>
            </li>
            <!--            <li>-->
            <!--              <h3>睡眠记录一</h3>-->
            <!--              <p>设备编号：10000</p>-->
            <!--              <p>睡眠时间：</p>-->
            <!--              <p>2019-10-01 22:00~08:00</p>-->
            <!--            </li>-->
            <!--            <li><h3>睡眠记录二</h3>-->
            <!--              <p>设备编号：10000</p>-->
            <!--              <p>睡眠时间：</p>-->
            <!--              <p>2019-10-01 22:00~08:00</p></li>-->
            <!--            <li><h3>睡眠记录三</h3>-->
            <!--              <p>设备编号：10000</p>-->
            <!--              <p>睡眠时间：</p>-->
            <!--              <p>2019-10-01 22:00~08:00</p></li>-->
            <!--            <li><h3>睡眠记录四</h3>-->
            <!--              <p>设备编号：10000</p>-->
            <!--              <p>睡眠时间：</p>-->
            <!--              <p>2019-10-01 22:00~08:00</p></li>-->
            <!--            <li><h3>睡眠记录五</h3>-->
            <!--              <p>设备编号：10000</p>-->
            <!--              <p>睡眠时间：</p>-->
            <!--              <p>2019-10-01 22:00~08:00</p></li>-->
            <!--            <li><h3>睡眠记录六</h3>-->
            <!--              <p>设备编号：10000</p>-->
            <!--              <p>睡眠时间：</p>-->
            <!--              <p>2019-10-01 22:00~08:00</p></li>-->
            <!--            <li><h3>睡眠记录七</h3>-->
            <!--              <p>设备编号：10000</p>-->
            <!--              <p>睡眠时间：</p>-->
            <!--              <p>2019-10-01 22:00~08:00</p></li>-->

          </ul>
        </div>
        <div style="cursor: pointer">
          <Icon type="ios-arrow-forward" size="30" style="margin-top:90px" @click="handleScroll(-240)"></Icon>
        </div>
      </div>
    </section>
    <section id="grade">
      <div class="grade">
        <div class="top">
          睡眠评分
        </div>
        <div class="bottom">
          <p>睡眠评分</p>
          <span>
        <i
          style="font-size:24px">{{asleepAnalyze[0] !== undefined ? JSON.parse(asleepAnalyze[0].sleepData).grade : ''}}</i>
        <span>分</span>
      </span>
          <p
            v-if="(asleepAnalyze[0] === undefined)"
            style="padding:0 20px 0 20px"
          ></p>
          <p
            v-else-if="(JSON.parse(asleepAnalyze[0].sleepData).grade >= 85 )&&
                                (JSON.parse(asleepAnalyze[0].sleepData).grade < 100)"
            style="padding:0 20px 0 20px"
          >本次睡眠时长是{{asleepAnalyze[0].asleepTime}}分钟，睡眠质量非常好，请继续保持</p>
          <p
            v-else-if="(JSON.parse(asleepAnalyze[0].sleepData).grade >= 65 )&&
                                (JSON.parse(asleepAnalyze[0].sleepData).grade < 85)"
            style="padding:0 20px 0 20px<85"
          >本次睡眠时长是{{asleepAnalyze[0].asleepTime}}分钟，睡眠质量一般，有待改进</p>
          <p v-else style="padding:0 20px 0 20px">本次睡眠时长是{{asleepAnalyze[0].asleepTime}}分钟，睡眠质量很差，急需补充睡眠！</p>

          <ul>
            <li>
              <p class="fontColor">上床时间</p>
              <p>{{asleepAnalyze[0] !== undefined ? formatDate(new Date(asleepAnalyze[0].bedTime),'yyyy-MM-dd hh:mm:ss')
                : ''}}</p>
            </li>
            <li>
              <p class="fontColor">起床时间</p>
              <p>
                {{asleepAnalyze[0] !== undefined ? formatDate(new Date(asleepAnalyze[0].offlineTime),
                'yyyy-MM-dd hh:mm:ss') : ''}}</p>
            </li>
            <li>
              <p class="fontColor">醒来次数</p>
              <p>{{asleepAnalyze[0] !== undefined ? JSON.parse(asleepAnalyze[0].sleepData).wakeUpNum : ''}}</p>
            </li>
            <li>
              <p class="fontColor">入睡时长</p>
              <p>{{asleepAnalyze[0] !== undefined ? asleepAnalyze[0].asleepTime : ''}}分钟</p>
            </li>
            <li>
              <p class="fontColor">睡眠效率</p>
              <p>{{asleepAnalyze[0] !== undefined ? JSON.parse(asleepAnalyze[0].sleepData).efficiency : ''}}</p>
            </li>
            <li>
              <p class="fontColor">深睡时长</p>
              <p>{{asleepAnalyze[0] !== undefined ? JSON.parse(asleepAnalyze[0].sleepData).allThreeTime : ''}}</p>
            </li>
          </ul>

        </div>
      </div>
      <div class="distribution">
        <div class="top">
          深浅睡眠分布
        </div>
        <div class="bottom" ref="chartBox">
          <ChartArea
            :xSleep="asleepAnalyze[0] !== undefined ? JSON.parse(asleepAnalyze[0].sleepData).sleep.map(item => Object.keys(item)[0]) : []"
            :ySleep="asleepAnalyze[0] !== undefined ? JSON.parse(asleepAnalyze[0].sleepData).sleep.map(item => Object.values(item)[0]) : []"
            style="width:100%;height:200px;margin:0px;border:none;" ref="myChartsize"></ChartArea>
        </div>
      </div>
    </section>
    <section id="love">
      <div class="love">
        <div class="top">
          本月促眠歌曲喜好
        </div>
        <div class="bottom">
          <Table
            border
            :columns="columns"
            highlight-row
            :data="song"/>
        </div>
      </div>
      <div class="statistics">
        <div class="top">
          深浅睡眠统计
        </div>
        <div class="bottom">
          <div class="fl">
            <ChartPie style="height:200px;margin:0;width:100%;border:none" :value="pieData"/>
          </div>
          <div class="fr">
            <p>清醒</p>
            <p>{{asleepAnalyze[0] !== undefined ? JSON.parse(asleepAnalyze[0].sleepData).allSoberTime : ''}}</p>
            <p>浅睡</p>
            <p>{{asleepAnalyze[0] !== undefined ? JSON.parse(asleepAnalyze[0].sleepData).allOneTime : ''}}</p>
            <p>中睡</p>
            <p>{{asleepAnalyze[0] !== undefined ? JSON.parse(asleepAnalyze[0].sleepData).allTowTime : ''}}</p>
            <p>深睡</p>
            <p>{{asleepAnalyze[0] !== undefined ? JSON.parse(asleepAnalyze[0].sleepData).allThreeTime : ''}}</p>
          </div>

        </div>
      </div>
    </section>
    <section id="fallAsleep">
      <div class="fallAsleep">
        <div class="top">
          入睡情绪分布
        </div>
        <div class="bottom">
          <ChartPie style="height:200px;margin:auto;width:100%;border:none" :value="fallAsleepFilter" :text="text"/>
          <ul>
            <li>
              <p class="fontColor">上床情绪</p>
              <p>焦虑3级</p>
            </li>
            <li>
              <p class="fontColor">入睡情绪</p>
              <p>发呆1级</p>
            </li>
            <li>
              <p class="fontColor">起床情绪</p>
              <p>正常1级</p>
            </li>
          </ul>

        </div>
      </div>
      <div class="heart">
        <div class="top">
          心率监控
        </div>
        <div class="bottom">
          <ChartLine style="height:100%;margin:0px;width:100%;border:none"
                     :value="asleepAnalyze[0] !== undefined ? JSON.parse(asleepAnalyze[0].sleepData).hearts : []"
                     :time="times"
                     :max="rateMax"
                     :interval="rateInterval"/>
        </div>
      </div>
    </section>
    <section id="warning">
      <div class="top">睡眠预警</div>
      <div class="bottom">
        <Table
          border
          :columns="columns2"
          highlight-row
          :data="sleepWarning">
          <slot name="footer" slot="footer">
            <Page
              show-elevator
              show-total
              show-sizer
              :total="bloc.paged.itemCount"
              :current="bloc.paged.pageIndex"
              :page-size="bloc.paged.pageSize"
              :page-size-opts="[15, 30, 50, 100]"
              @on-change="val=>bloc.getSleepWarning(val, bloc.paged.pageSize)"
              @on-page-size-change="val=>bloc.getSleepWarning(bloc.paged.pageIndex, val)"
            />
          </slot>
        </Table>
      </div>
    </section>
  </div>
</template>
<script lang="ts">
  import {Component, Prop, Vue} from 'vue-property-decorator';
  import {ChartLine, ChartBar, ChartPie, ChartArea, AreaLine} from '@/component/charts';
  import {DetailBloc} from '@/view/member/bloc/MemberDetailBloc';

  import {ListBloc} from '@/view/member/bloc/ListBloc';
  import {formatDate} from '@/base/util/Dates';

  @Component({
    components: {ChartLine, ChartBar, ChartPie, ChartArea, AreaLine}
  })
  export default class extends Vue {
    @Prop(Object) readonly tableData: object | undefined
    @Prop(Object) readonly rouseCount: object | undefined
    @Prop(Array) readonly asleepAnalyze!: Array<Object>;
    @Prop(Array) readonly sleepWarning!: Array<Object> | undefined;
    @Prop(Array) readonly song!: Array<Object> | undefined;
    options: any = {}
    time: object = {
      xAxis: [1, 2],
      yAxis: [],
      text: ``
    }
    bloc: DetailBloc = new DetailBloc()
    formatDate = formatDate

    // rouses: object = {}
    get rouses() {
      return this.rouseCount
    }

    get analyze() {
      return this.asleepAnalyze
    }

    promote: Array<number> = []
    xSleep = [1, 2, 3, 4, 5, 6]
    ySleep = [3, 2, 3, 4, 1, 3]
    xSleep1 = []
    ySleep1 = []
    const
    columns = [{
      title: '排名',
      key: 'musicId',
      align: 'left',
      minWidth: 120,
      tooltip: true
    },
      {
        title: '歌曲',
        key: 'musicName',
        align: 'left',
        minWidth: 100,
        tooltip: true
      },
      {
        title: '播放次数',
        key: 'num',
        align: 'left',
        minWidth: 100,
        tooltip: true
      }]
    data = [{rate: 1, song: '前生今世', time: '播放次数'}, {}, {}]
    type = {
      'HEART_OVER_TOP': '过高',
      'HEART_TOO_LOW': '过低'
    }
    columns2 = [{
      title: '序号',
      key: 'id',
      align: 'left',
      minWidth: 120,
      tooltip: true
    },
      {
        title: '预警类型',
        // key: 'warningType',
        render: (h: any, params: any) => {
          return h('span', {
            domProps: {
              innerText: this.type[params.row.warningType]
            }
          });
        },
        align: 'left',
        minWidth: 100,
        tooltip: true
      },
      {
        title: '监测值',
        key: 'detectionValue',
        align: 'left',
        minWidth: 100,
        tooltip: true
      },
      {
        title: '监测时间',
        // key: 'startTime',
        render: (h: any, params: any) => {
          return h('span', {
            domProps: {
              innerText: formatDate(new Date(params.row.startTime), 'yyyy-MM-dd hh:mm:ss')
            }
          });
        },
        align: 'left',
        minWidth: 100,
        tooltip: true
      }]
    data2 = [{rate: 1, song: '前生今世', time: '播放次数'}, {}, {}]
    pieData = [
      {
        value: 33,
        legendname: '清醒',
        name: '清醒',
        itemStyle: {color: 'rgba(22, 128, 228, 1)'}
      },
      {
        value: 30,
        legendname: '浅睡',
        name: '浅睡',
        itemStyle: {color: 'rgba(18, 171, 176, 1)'}
      },
      {
        value: 20,
        legendname: '中睡',
        name: '中睡',
        itemStyle: {color: 'rgba(42, 171, 88, 1)'}
      },
      {
        value: 10,
        legendname: '深睡',
        name: '深睡',
        itemStyle: {color: 'rgba(214, 179, 28, 1)'}
      }
    ]
    fallAsleep = [
      {
        value: 0,
        legendname: '抑郁',
        name: '抑郁',
        itemStyle: {color: 'rgba(22, 128, 228, 1)'}
      },
      {
        value: 30,
        legendname: '焦虑',
        name: '焦虑',
        itemStyle: {color: 'rgba(18, 171, 176, 1)'}
      },
      {
        value: 0,
        legendname: '紧张',
        name: '紧张',
        itemStyle: {color: 'rgba(42, 171, 88, 1)'}
      },
      {
        value: 0,
        legendname: '发呆',
        name: '发呆',
        itemStyle: {color: 'rgba(214, 179, 28, 1)'}
      },
      {
        value: 0,
        legendname: '兴奋',
        name: '兴奋',
        itemStyle: {color: 'rgba(214, 179, 28, 1)'}
      },
      {
        value: 0,
        legendname: '正常',
        name: '正常',
        itemStyle: {color: 'rgba(214, 179, 28, 1)'}
      }
    ]
    fallAsleepFilter: Array<object> = []
    text = '睡眠\n' +
      '情绪分布'
    rateMax = 150
    rateInterval = 30
    heartss = [0, 30, 60, 90, 120, 150]
    times = []
    tagBodyLeft = 0
    $refs!: {
      scrollOuter: HTMLFormElement;
      scrollBody: HTMLFormElement;
    };

    handleScroll(offset) {
      const outerWidth = this.$refs.scrollOuter.offsetWidth
      const bodyWidth = this.$refs.scrollBody.offsetWidth
      if (offset > 0) {
        this.tagBodyLeft = Math.min(0, this.tagBodyLeft + offset)
      } else {
        if (outerWidth < bodyWidth) {
          if (this.tagBodyLeft < -(bodyWidth - outerWidth)) {
            this.tagBodyLeft = this.tagBodyLeft
          } else {
            this.tagBodyLeft = Math.max(this.tagBodyLeft + offset, outerWidth - bodyWidth)
          }
        } else {
          this.tagBodyLeft = 0
        }
      }
    }

    dateChange(date) {
      if (date[0] === '' || date[1] === '') {
        this.bloc.form.createBegin = ''
        this.bloc.form.createEnd = ''
        return false
      }
      this.bloc.form.createBegin = date[0]
      this.bloc.form.createEnd = date[1]
      this.$emit('sleepChange', date[0], date[1])
    }

    reportChange(date) {
      if (date === '') {
        this.bloc.form.createBegin = ''
        return false
      }
      this.bloc.form.createBegin = date
      this.$emit('reportChange', date)
    }

    created() {
      if (this.rouses !== undefined) {
        this.time['yAxis'].splice(0, 0, this.rouses['asleepNum'], this.rouses['insomniaNum'])
        this.promote.splice(0, 0, this.rouses['commonNum'], this.rouses['rouseNum'])
      }
      if (this.analyze[0] !== undefined) {
        let allSoberTime = JSON.parse(this.analyze[0]['sleepData']).allSoberTime
        let allOneTime = JSON.parse(this.analyze[0]['sleepData']).allOneTime
        let allTowTime = JSON.parse(this.analyze[0]['sleepData']).allTowTime
        let allThreeTime = JSON.parse(this.analyze[0]['sleepData']).allThreeTime
        this.pieData[0].value = allSoberTime.slice(0, 2) + allSoberTime.slice(4, 6) + allSoberTime.slice(8, 9)
        this.pieData[1].value = allOneTime.slice(0, 2) + allOneTime.slice(4, 6) + allOneTime.slice(8, 9)
        this.pieData[2].value = allTowTime.slice(0, 2) + allTowTime.slice(4, 6) + allTowTime.slice(8, 9)
        this.pieData[3].value = allThreeTime.slice(0, 2) + allThreeTime.slice(4, 6) + allThreeTime.slice(8, 9)
        let allMood = JSON.parse(this.analyze[0]['sleepData']).allMood
        this.fallAsleep.forEach(item2 => {
          allMood.forEach(item => {
            if (item2.name === item.moodChangeCode) {
              item2.value += item.num
            } else {
              item2.value += 0
            }
          })
        })
        this.fallAsleepFilter = this.fallAsleep.filter(item => item.value !== 0)
      }
    }
  };
</script>
<style lang="less" scoped>
  #statistics {
    .top {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      margin-left: 20px;

      i {
        font-size: 20px;
      }

      .time {
        float: right;
        margin-right: 210px;
      }
    }

    .statistics {
      padding: 10px 20px;
      width: 100%;
      display: flex;
      justify-content: space-between;

      li {
        height: 200px;
        width: 22%;
        padding: 20px;
        border: 1px solid rgba(242, 242, 242, 1);
        border-radius: 4px;

        .top {
          display: flex;
          justify-content: space-between;
          margin: 0;
          height: 120px;

          .time {
            height: 80px;
            width: 100px;
            margin: 0;

            h3 {
              font-weight: lighter;
            }

            p {
              font-size: 40px;
            }
          }
        }

        .bottom {
          border-top: 1px solid rgba(242, 242, 242, 1);
          margin-top: 10px;
          display: flex;
          justify-content: space-between;

          span {
            i {
              margin-left: 10px;
            }
          }
        }
      }
    }
  }

  #report {

    .top {
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: space-between;
      padding: 20px;
      border-bottom: 1px solid rgba(242, 242, 242, 1);

      i {
        font-size: 20px;
      }

      .time {
        float: right;
        margin-right: 210px;
      }
    }

    .report {
      display: flex;
      justify-content: space-between;
      padding: 10px 30px;
      width: 100%;
      height: 200px;

      .scroll-outer {
        width: 100%;
        position: relative;
        height: 200px;
        border-left: 1px solid rgba(242, 242, 242, 1);
        border-right: 1px solid rgba(242, 242, 242, 1);
        overflow: hidden;

        ul {
          height: 200px;
          position: absolute;
          display: inline-block;
          white-space: nowrap;
          transition: left .3s ease;

          li {
            width: 300px;
            height: 100%;
            padding: 20px 30px;
            display: inline-block;
            vertical-align: top;
            line-height: 40px;
            /*display: flex;*/
            /*flex-direction: column;*/
            /*justify-content: space-between;*/

            h3 {
              font-weight: lighter;
            }
          }
        }
      }
    }
  }

  #grade {
    display: flex;
    justify-content: space-between;
    height: 290px;
    width: 100%;
    margin-top: 30px;

    .grade {
      width: 30%;
      padding: 10px 30px;

      .top {
        height: 40px;
        padding: 10px 30px;
        border-bottom: 1px solid rgba(242, 242, 242, 1);
      }

      .bottom {
        height: calc(100% - 40px);
        margin-top: 10px;
        border: 1px solid rgba(242, 242, 242, 1);
        text-align: center;

        h2,
        p {
          margin: 0px;
        }

        ul {
          padding: 20px 20px 0 20px;

          li {
            float: left;
            width: 33.3333%;
            height: 65px;
            font-size: 12px;
          }
        }
      }
    }

    .distribution {
      width: 70%;
      padding: 10px 30px;
      height: 100%;

      .top {
        height: 40px;
        padding: 10px 30px;
        border-bottom: 1px solid rgba(242, 242, 242, 1);
      }

      .bottom {
        width: 100%;
        height: calc(100% - 40px);
        margin-top: 10px;
        border: 1px solid rgba(242, 242, 242, 1);

      }
    }
  }

  #love {
    display: flex;
    justify-content: space-between;
    height: 290px;
    width: 100%;
    margin-top: 30px;

    .love {
      width: 30%;
      padding: 10px 30px;

      .top {
        height: 40px;
        padding: 10px 30px;
        border-bottom: 1px solid rgba(242, 242, 242, 1);
      }

      .bottom {
        height: calc(100% - 40px);
        margin-top: 10px;
        border: 1px solid rgba(242, 242, 242, 1);
        text-align: center;

        h2,
        p {
          margin: 0px;
        }

        ul {
          padding: 20px 20px 0 20px;

          li {
            float: left;
            width: 33.3333%;
            height: 65px;
            font-size: 12px;
          }
        }
      }
    }

    .statistics {
      width: 70%;
      padding: 10px 30px;
      height: 100%;

      .top {
        height: 40px;
        padding: 10px 30px;
        border-bottom: 1px solid rgba(242, 242, 242, 1);
      }

      .bottom {
        width: 100%;
        height: calc(100% - 40px);
        margin-top: 10px;
        border: 1px solid rgba(242, 242, 242, 1);

        .fl {
          float: left;
          width: 70%;
          height: 100%;
        }

        .fr {
          float: left;
          width: 30%;
          height: 100%;
          text-align: left;
          padding: 14px 0 10px 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          p {
            margin: 0px;
            overflow: hidden;
            font-size: 10px;
          }
        }

      }
    }

  }

  #fallAsleep {
    display: flex;
    justify-content: space-between;
    height: 390px;
    width: 100%;
    margin-top: 30px;

    .fallAsleep {
      width: 50%;
      padding: 10px 30px;

      .top {
        height: 40px;
        padding: 10px 30px;
        border-bottom: 1px solid rgba(242, 242, 242, 1);
      }

      .bottom {
        height: calc(100% - 40px);
        margin-top: 10px;
        border: 1px solid rgba(242, 242, 242, 1);
        text-align: center;

        ul {
          margin: 0;
          width: 100%;
          height: calc(100% - 240px);
          padding: 30px 100px 10px 100px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;

          li {
            height: 33.333%;

            p {
              margin: 0px;
              overflow: hidden;
              font-size: 10px;

              &:nth-child(2) {
                font-size: 20px;
              }
            }
          }
        }

      }
    }

    .heart {
      width: 50%;
      padding: 10px 30px;
      height: 100%;

      .top {
        height: 40px;
        padding: 10px 30px;
        border-bottom: 1px solid rgba(242, 242, 242, 1);
      }

      .bottom {
        width: 100%;
        height: calc(100% - 40px);
        margin-top: 10px;
        border: 1px solid rgba(242, 242, 242, 1);

        .fl {
          float: left;
          width: 70%;
          height: 100%;
        }

        .fr {
          float: left;
          width: 30%;
          height: 100%;
          text-align: left;
          padding: 14px 0 10px 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          p {
            margin: 0px;
            overflow: hidden;
            font-size: 10px;
          }
        }

      }
    }

  }

  #warning {
    height: 390px;
    width: 100%;
    margin-top: 30px;

    .top {
      height: 40px;
      padding: 10px 30px;
      border-bottom: 1px solid rgba(242, 242, 242, 1);
    }

    .bottom {
      margin-top: 10px;
    }
  }
</style>
